<style	lang="scss" scoped>

.top-line-city{
	position: relative;
	height: px2vw(50);
	line-height: px2vw(50);
	font-size: px2vw($fz14);
	padding-left: px2vw(15);
	font-weight: 600;
	border-bottom: px2vw(1) solid #ddd;
	.right-txt{
		position: absolute;
		right: px2vw(25);
		top: 50%;
		height: px2vw(50);
		margin-top:- px2vw(25);
		line-height: px2vw(50);
		font-size: px2vw($fz14);
		color: #999;
	}
}
	.f-tab{
			display: flex;
			width: px2vw(375);
			position: relative;
			margin: 0 auto;
			border-top:	px2vw(10) solid #f5f5f5;
			.f-btn{
				font-size: px2vw($fz14);
				height:	px2vw(30);
				line-height:	px2vw(30);
				margin-left: px2vw(10); 
				margin-right: px2vw(35);
				.arrow{
					margin-left: px2vw(5); 
				}
			}
		.item{
			height:	px2vw(60);
			line-height:	px2vw(90);
			font-size: px2vw($fz18);
			font-weight: 600;
			color: #888;
			width: 50%;
			text-align: center;
			position: relative;
			.tb-line{
				background-color: #F24244;
				height: px2vw(3);
				width: px2vw(20);
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: - px2vw(10);
				border-radius: px2vw(3);
				display: none;
			}
			.r-tip{
				background-color: #F24244;
				font-size: px2vw($fz12);
				height: px2vw(20);
				line-height: px2vw(20);
				width: px2vw(20);
				color: #fff;
				position: absolute;
				border-radius: px2vw(20);
				top: px2vw(30);
				right: px2vw(30);
				z-index: 99;
				display: none;
			}
			.topimg{
				position: absolute;
				top:0;
				right:- px2vw(20);
				height: px2vw(18);
				width: px2vw(64);
				z-index: 999;
			}
		}
		.on{
			color: #F24244;
			.r-tip,
			.tb-line{
				display: block;
			}
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:	px2vw(60);
		}
	}

	.s-list{
			width: px2vw(355);
			margin: px2vw(10) 0 px2vw(30) auto;
			.item{
						height: px2vw(86);
						width: 100%;
						position: relative;
						color: #000;
						 .title{
							 font-size: px2vw($fz18);
							 padding-top: px2vw(18);
							 .tiptxt{
								 font-size: px2vw($fz12);
								 border:px2vw(1) solid #F24244;
								 color: #F24244;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
							 .tiptxt-lv{
								 font-size: px2vw($fz12);
								 border:px2vw(1) solid #4194FB;
								 color: #4194FB;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
						 }
						.t-content{
							font-size: px2vw($fz14);
							color: #888;
							padding-top: px2vw(10);
						}
						.distance{
							position: absolute;
							top: 50%;
							height:	px2vw(20);
							line-height:	px2vw(20);
							right: px2vw(16);
							font-size: px2vw($fz14);
							margin-top: -	px2vw(10);
							color: #333;
						}
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(360);
						}
				}
	}
</style>

<template>
	<view class="studios-list">

		<nav-bar
			title="影城列表"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

		<view class="content">
			<view class="top-line-city">
				当前城市：<text v-text="cityName" />
				<view class="right-txt">切换城市</view>
				<iconArrow :point="1" />
			</view>

			<!-- 品牌 -->
			<view class="f-tab">

				<view class="item" :class="{on:iBrand===0}" @click="onClickBrandItem(0)">
					<text v-text="lBrand[0].brandName"></text>
					<text class="r-tip" v-text="lBrand[0].cinemaAmount"></text>
					<image class="topimg" src="../../static/wxgy.png" />
					<view class="tb-line" />
				</view>

				<view class="c-line-item"></view>

				<view class="item" :class="{on:iBrand===1}" @click="onClickBrandItem(1)">
					<text v-text="lBrand[1].brandName"></text>
					<text class="r-tip" v-text="lBrand[1].cinemaAmount"></text>
					<view class="tb-line" />
				</view>
			</view>

			<!-- 影城列表 -->
			<view class="s-list">
				<view class="item" v-for="(v, k) in lCinemas" :key="k" @click="onClickCinemasItem(k)">
					
					<!-- 名称 标签 -->
					<view class="title">
						<text v-text="v.name" style="width: 80%;" />

						<!-- 标签 -->
						<block v-for="(v, k) in v.tags" :key="k">
							<text v-if="String(v).toUpperCase() == 'IMAX'" class="tiptxt">IMAX</text>
							<text v-if="String(v).toUpperCase() == '4D厅'" class="tiptxt-lv">4D厅</text>
						</block>
					</view>

					<!-- 地址 -->
					<view class="t-content" v-text="v.address"></view>

					<!-- 距离 -->
					<view class="distance" v-text="v.distance_"></view>

					<!-- 分割线 -->
					<view class="b-line" />
				</view>
			</view>

		</view>
		<apple-sliver></apple-sliver>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
import NavBar from "../../components/nav-bar";

export default {
	components: {
		iconArrow,
	},

	data() {
		return {
			cityName: "重庆市",
			lBrand: false,
			iBrand: 0,
			lCinemas: [],
		}
	},

	onLoad() {
		this.getLBrand();
	},

	methods: {

		/**
		 * 获取品牌
		 */
		getLBrand() {
			this.$request.get({
				url: `/member/brand/city/${this.cityName}`,

				success: (res) => {
					const list = res.data.data;
					this.lBrand = list;
					list.length >= 1 && this.getLCinemas();
				}
			});
		},

		/**
		 * 获取影院
		 */
		getLCinemas() {
			uni.getLocation({
				type: "gcj02",

				success: (res) => {
					this.$request.get({
						url: `/member/city/${this.cityName}/cinemas`,

						data: {
							brandId: this.lBrand[this.iBrand].brandId,
							latitude: res.latitude,
							longitude: res.longitude,
						},

						success: (res) => {
							const list = (res.data.data || []).map((v) => {
								v.distance_ = this.$MToKM(v.distance, "km");
								return v;
							});
							this.lCinemas = list;
						}
					});
				}
			});
		},

		/**
		 * 品牌点击
		 */
		onClickBrandItem(i) {
			this.iBrand = i;
			this.getLCinemas();
		},

		/**
		 * 影城点击
		 */
		onClickCinemasItem(index){
			this.$api.goPage('/pages/index/cinema_details');
		},

	}
}
</script>